<template>
  <div class="postgres-sql-box">
    <el-dialog 
    v-loading="loading"
    element-loading-text="服务端正在读取该数据源"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :show-close="false"
    :close-on-click-modal="false"
    title="请输入连接PostgresSql的基本信息" 
    :visible.sync="postgresSqlBoxVisible" width="30%">
      <div class="content">
        <el-input v-model="dbname" placeholder="请输入数据库名"></el-input>
        <el-input v-model="user" placeholder="用户名"></el-input>
        <el-input v-model="host" placeholder="主机地址"></el-input>
        <el-input v-model="password" placeholder="密码"></el-input>
        <el-input v-model="port" placeholder="端口号"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setPostgresSqlBoxVisible(false)">取 消</el-button>
        <el-button type="primary" @click="connect">确 定</el-button>
      </span>
    </el-dialog>
    
    <load-sheet 
    :loadSheetBoxVisible="loadSheetBoxVisible"
     :data="data"
     v-on:set-load-sheet-box-visible="setLoadSheetBoxVisible"></load-sheet>
  </div>
</template>

<script>
import LoadSheet from '@/components/common/LoadSheet.vue'
export default {
  props: ["postgresSqlBoxVisible"],
  components:{
      LoadSheet
  },
  data() {
    return {
      dbname: "",
      user: "",
      host: "",
      password: "",
      port: "",
      loadSheetBoxVisible: false,
      data: null,
      loading: false,
    };
  },

  methods: {
    setPostgresSqlBoxVisible(val) {
      this.$emit("set-postgres-sql-box-visible", val);
    },
    setActiveSheet(sheet) {
      let json = this.data.sheetJson[sheet];
      this.table = this.data.sheetTable[sheet];

      if(json == "{}"){
          this.table = "<h2>暂无任何数据</h2>"
      }

      this.activeSheet = sheet;
    },
    setLoadSheetBoxVisible(val){
        this.loadSheetBoxVisible = val
    },
    connect() {
      let dbname = this.dbname;
      let user = this.user;
      let host = this.host;
      let password = this.password;
      let port = this.port;

      if (
        dbname == "" ||
        user == "" ||
        host == "" ||
        password == "" ||
        port == ""
      ) {
        this.$message.error("请输入完整的信息");
        return;
      }

      let time = new Date().getTime().toString()
      let md5 = this.$md5(time)

      let data = {
        dbname,
        user,
        host,
        password,
        port,
        md5,
      };

      this.loading = true

      this.$axios.post("/postgresSql", data).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });

          this.data = res.data;
          this.setPostgresSqlBoxVisible(false)
          this.loadSheetBoxVisible = true;
          
        } else this.$message.error(res.msg);

        this.loading = false
      });
    },
    load() {
      if (this.sheets.length == 0) {
        this.$message.error("请选择要加载的表！");
        return;
      }

      let data = {
        sheetNames: this.sheets,
      };

      this.$axios.post("/load", data).then((res) => {
        if (res.code == 200) {
          this.loadSheetBoxVisible = false;
          this.$store.commit("addLoadSheetList", res.data);
        }
      });
    },
  },
};
</script>

<style scoped>

.active {
  background-color: rgb(244, 244, 244);
}

.load-sheet-box {
  display: flex;
  justify-content: space-around;
}

.load-sheet-box > .sheet-list {
  width: 20%;
}

.load-sheet-box > .table {
  width: 80%;
  border-left: 1px solid rgb(234, 234, 234);
  padding-left: 15px;
  text-align: center;

  overflow: scroll;
  user-select: none;
}

.sheet-list {
  list-style-type: none;
  user-select: none;
}

.sheet-list li {
  padding: 8px;
}

.sheet-list li:hover {
  background-color: rgb(244, 244, 244);
}
</style>

<style>
.postgres-sql-box .content .el-input {
  margin-bottom: 5px;
}
</style>